<template>
  <div class="content">
    <!-- 背景图片 -->
    <BackgroundImgCom></BackgroundImgCom>
    <!-- 内容 -->
    <div class="x-flex">
      <!-- 时间 日期 星期 -->
      <DeteTimeWeekCom class="x-detatime"></DeteTimeWeekCom>
      <!-- 搜索框 -->
      <SearchInputCom class="x-search-input"></SearchInputCom>
      <!-- 我的应用 -->
      <MyApplicationCom ref="myApp" class="x-my-application"></MyApplicationCom>
      <!-- 备案号 -->
      <FilingNoCom ref="filingNo" class="x-filing-no"></FilingNoCom>
    </div>
    <!-- 左侧弹窗 -->
    <SideWindow class="x-side-window" @editMyApp="editMyApp"></SideWindow>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, toRaw } from "vue";

import BackgroundImgCom from "@/components/BackgroundImgCom.vue";
import DeteTimeWeekCom from "@/components/DeteTimeWeekCom.vue";
import SearchInputCom from "@/components/SearchInputCom.vue";
import MyApplicationCom from "@/components/MyApplicationCom.vue";
import SideWindow from "@/components/SideWindow.vue";
import FilingNoCom from "@/components/FilingNoCom.vue";

export default defineComponent({
  name: "HomeView",
  components: {
    BackgroundImgCom,
    DeteTimeWeekCom,
    SearchInputCom,
    MyApplicationCom,
    SideWindow,
    FilingNoCom,
  },
  setup() {
    const myApp = ref<any>();
    const refMyApp = (): Promise<any> => {
      return myApp.value.getMyApplocatList();
    };
    return {
      myApp,
      refMyApp,
    };
  },
  methods: {
    editMyApp() {
      this.refMyApp();
    },

    // 获取报表号
  },
});
</script>

<style lang="less" scoped>
.content {
  .x-flex {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9;

    .x-detatime {
      margin-top: 10%;
    }

    .x-search-input {
      margin-top: 20px;
    }

    .x-my-application {
      margin-top: 60px;
    }

    .x-side-window {
    }

    .x-filing-no {
      position: absolute;
      bottom: 10px;
      left: 0;
      right: 0;
    }
  }
}
</style>
